<template>
  <div class="left-panel">
    <h3>组件类型</h3>
    <div class="draggable-item" draggable="true" @dragstart="handleDragStart($event, containerComponent)">
      容器组件
    </div>
    <div class="draggable-item" draggable="true" @dragstart="handleDragStart($event, inputComponent)">
      输入框组件
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      containerComponent: {
        name: 'Container',
        label: '容器',
        width: '400px',
        height: '200px',
        backgroundColor: '#f5f5f5'
      },
      inputComponent: {
        name: 'Input',
        label: '输入框',
        width: '200px',
        height: '50px',
        backgroundColor: '#ffffff',
        placeholder: '请输入内容',
        color: '#000000' // 默认文字颜色为黑色
      }
    };
  },
  methods: {
    handleDragStart(event, comp) {
      // 将组件信息保存到拖拽事件中
      event.dataTransfer.setData('component', JSON.stringify(comp));
    }
  }
};
</script>

<style scoped>
.left-panel {
  width: 200px;
  padding: 10px;
  border-right: 1px solid #ddd;
}

.draggable-item {
  padding: 8px;
  margin: 4px 0;
  background-color: #f5f5f5;
  border-radius: 4px;
  cursor: grab;
}

.draggable-item:hover {
  background-color: #e0e0e0;
}
</style>
